<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>vuepress 构建自己的项目笔记 | Jaho’s Blog</title>
    <meta name="generator" content="VuePress 1.8.0">
    <link rel="icon" href="/favicon.ico">
    <link rel="manifest" href="/manifest.json">
    <meta name="description" content="记录日常学习工作">
    
    <link rel="preload" href="/assets/css/0.styles.5b8fe0a4.css" as="style"><link rel="preload" href="/assets/js/app.6514719e.js" as="script"><link rel="preload" href="/assets/js/2.ea114ffb.js" as="script"><link rel="preload" href="/assets/js/8.1b9c5002.js" as="script"><link rel="preload" href="/assets/js/4.e093c564.js" as="script"><link rel="prefetch" href="/assets/js/10.13203aa5.js"><link rel="prefetch" href="/assets/js/11.099868c4.js"><link rel="prefetch" href="/assets/js/12.c8365e17.js"><link rel="prefetch" href="/assets/js/13.89751e7c.js"><link rel="prefetch" href="/assets/js/14.31f563eb.js"><link rel="prefetch" href="/assets/js/15.08b381b6.js"><link rel="prefetch" href="/assets/js/16.1a3867de.js"><link rel="prefetch" href="/assets/js/17.7dd4e0c6.js"><link rel="prefetch" href="/assets/js/18.907c4597.js"><link rel="prefetch" href="/assets/js/19.fac8aa1a.js"><link rel="prefetch" href="/assets/js/20.73fe0e75.js"><link rel="prefetch" href="/assets/js/21.5c50aa1c.js"><link rel="prefetch" href="/assets/js/22.83d03663.js"><link rel="prefetch" href="/assets/js/23.061e7ac0.js"><link rel="prefetch" href="/assets/js/24.cc7e9011.js"><link rel="prefetch" href="/assets/js/25.fa6c7aef.js"><link rel="prefetch" href="/assets/js/26.39392f70.js"><link rel="prefetch" href="/assets/js/27.204436be.js"><link rel="prefetch" href="/assets/js/28.3f54c157.js"><link rel="prefetch" href="/assets/js/29.799d048c.js"><link rel="prefetch" href="/assets/js/3.6c5d6214.js"><link rel="prefetch" href="/assets/js/30.deed02f3.js"><link rel="prefetch" href="/assets/js/31.5916873b.js"><link rel="prefetch" href="/assets/js/32.b0634144.js"><link rel="prefetch" href="/assets/js/33.734675b8.js"><link rel="prefetch" href="/assets/js/34.20404dc4.js"><link rel="prefetch" href="/assets/js/35.d93b829f.js"><link rel="prefetch" href="/assets/js/36.b0692d8d.js"><link rel="prefetch" href="/assets/js/37.3dffa306.js"><link rel="prefetch" href="/assets/js/38.04649a97.js"><link rel="prefetch" href="/assets/js/39.7dfcdc32.js"><link rel="prefetch" href="/assets/js/40.04914511.js"><link rel="prefetch" href="/assets/js/41.ced85449.js"><link rel="prefetch" href="/assets/js/42.72739213.js"><link rel="prefetch" href="/assets/js/43.de1cff16.js"><link rel="prefetch" href="/assets/js/44.48e301ae.js"><link rel="prefetch" href="/assets/js/45.870a7650.js"><link rel="prefetch" href="/assets/js/46.657f15b8.js"><link rel="prefetch" href="/assets/js/47.3df1bfdb.js"><link rel="prefetch" href="/assets/js/48.f4e4e774.js"><link rel="prefetch" href="/assets/js/49.632bf611.js"><link rel="prefetch" href="/assets/js/5.6531e181.js"><link rel="prefetch" href="/assets/js/50.a8018493.js"><link rel="prefetch" href="/assets/js/51.cb424f59.js"><link rel="prefetch" href="/assets/js/52.a9f595dc.js"><link rel="prefetch" href="/assets/js/53.cf8a9ec0.js"><link rel="prefetch" href="/assets/js/54.46d774a3.js"><link rel="prefetch" href="/assets/js/55.3574f9b8.js"><link rel="prefetch" href="/assets/js/56.baf60ba5.js"><link rel="prefetch" href="/assets/js/57.af42b559.js"><link rel="prefetch" href="/assets/js/58.9300cb59.js"><link rel="prefetch" href="/assets/js/6.00f437ec.js"><link rel="prefetch" href="/assets/js/7.58ac7166.js"><link rel="prefetch" href="/assets/js/9.5c076362.js">
    <link rel="stylesheet" href="/assets/css/0.styles.5b8fe0a4.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/" class="home-link router-link-active"><img src="/logo.png" alt="Jaho’s Blog" class="logo"> <span class="site-name can-hide">Jaho’s Blog</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/posts/" class="nav-link">
  技术博客
</a></div> <a href="https://juejin.cn/user/26836627369806" target="_blank" rel="noopener noreferrer" class="repo-link">
    个人主页
    <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/posts/" class="nav-link">
  技术博客
</a></div> <a href="https://juejin.cn/user/26836627369806" target="_blank" rel="noopener noreferrer" class="repo-link">
    个人主页
    <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>项目介绍</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/introduce/" aria-current="page" class="sidebar-link">myblog 介绍与规约</a></li><li><a href="/introduce/vue-press.html" aria-current="page" class="active sidebar-link">vuepress 构建自己的项目笔记</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/introduce/vue-press.html#初体验" class="sidebar-link">初体验</a></li><li class="sidebar-sub-header"><a href="/introduce/vue-press.html#简单配置" class="sidebar-link">简单配置</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/introduce/vue-press.html#其他配置参考官网即可" class="sidebar-link">其他配置参考官网即可</a></li></ul></li><li class="sidebar-sub-header"><a href="/introduce/vue-press.html#在-md-中使用-vue" class="sidebar-link">在 md 中使用 vue</a></li><li class="sidebar-sub-header"><a href="/introduce/vue-press.html#部署到-gh-page" class="sidebar-link">部署到 gh-page</a></li><li class="sidebar-sub-header"><a href="/introduce/vue-press.html#可以作为基础项目的分支" class="sidebar-link">可以作为基础项目的分支</a></li></ul></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="vuepress-构建自己的项目笔记"><a href="#vuepress-构建自己的项目笔记" class="header-anchor">#</a> vuepress 构建自己的项目笔记</h1> <p>偶然发现一个 Markdown 文档生成的利器，也是 vue 官网推荐的一个工具 <a href="https://vuepress.vuejs.org/zh/guide/" target="_blank" rel="noopener noreferrer">vuepress<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <h2 id="初体验"><a href="#初体验" class="header-anchor">#</a> 初体验</h2> <p>官网的 <a href="https://vuepress.vuejs.org/zh/guide/getting-started.html#%E5%85%A8%E5%B1%80%E5%AE%89%E8%A3%85" target="_blank" rel="noopener noreferrer">快速上手<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>
能教你怎么快速的看到一个主页面。这里总结下步骤</p> <div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>本教程对于 vuepress 的说明是 0.x 版本的，现在 vuepress 是 1.5.x 了，所以部分配置可能不适合；</p> <p>通用的有：部署到 gh-page、在 md 中使用 vue</p> <p>1.5.x 分支模板：可以直接用来快速创建一个常用的新笔记仓库：https://github.com/zq99299/mq-tutorial/tree/vuepress-tpl</p></div> <ol><li><p>创建一个项目</p> <div class="language- extra-class"><pre class="language-text"><code>创建目录：vuepress-demo
并用 npm init 命令初始化一个 packagen.json 文件出来。初始值如下

  {
    &quot;name&quot;: &quot;vuepress-demo&quot;,
    &quot;version&quot;: &quot;1.0.0&quot;,
    &quot;description&quot;: &quot;vuepress 使用测试&quot;,
    &quot;main&quot;: &quot;index.js&quot;,
    &quot;scripts&quot;: {
      &quot;test&quot;: &quot;echo \&quot;Error: no test specified\&quot; &amp;&amp; exit 1&quot;
    },
    &quot;author&quot;: &quot;&quot;,
    &quot;license&quot;: &quot;ISC&quot;
}
</code></pre></div><p>其实这里都不是罪重要的。最重要的是添加 依赖和设置入口</p></li> <li><p>添加依赖和设置入口</p> <div class="language-json extra-class"><pre class="language-json"><code><span class="token punctuation">{</span>
  <span class="token property">&quot;name&quot;</span><span class="token operator">:</span> <span class="token string">&quot;vuepress-demo&quot;</span><span class="token punctuation">,</span>
  <span class="token property">&quot;version&quot;</span><span class="token operator">:</span> <span class="token string">&quot;1.0.0&quot;</span><span class="token punctuation">,</span>
  <span class="token property">&quot;description&quot;</span><span class="token operator">:</span> <span class="token string">&quot;vuepress 使用测试&quot;</span><span class="token punctuation">,</span>
  <span class="token property">&quot;scripts&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token property">&quot;docs:dev&quot;</span><span class="token operator">:</span> <span class="token string">&quot;vuepress dev docs&quot;</span><span class="token punctuation">,</span>
    <span class="token property">&quot;docs:build&quot;</span><span class="token operator">:</span> <span class="token string">&quot;vuepress build docs&quot;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token property">&quot;devDependencies&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token property">&quot;vuepress&quot;</span><span class="token operator">:</span> <span class="token string">&quot;^0.14.2&quot;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

</code></pre></div><p>并使用 <code>npm install</code> 命令安装 vuepress 依赖</p></li> <li><p>首页编写</p> <p>随意写一点内容即可</p> <div class="language- extra-class"><pre class="language-text"><code>目录结构如下：
| - docs
 |- README.md
</code></pre></div></li> <li><p>运行 <code>npm run docs:dev</code></p> <p>这个开发模式，有一个功能就是：会监控 docs 目录下的文档修改，会自动编译（可以想象成 vue 项目中的热更新）；
但是一般是不需要编写边看生成的站点的，这个看个人爱好，我喜欢用 atom 编写，生成的时候才用 vuepress 来生成站点</p></li></ol> <h2 id="简单配置"><a href="#简单配置" class="header-anchor">#</a> 简单配置</h2> <p>这些看官网文档即可，讲得很详细了，这里我想说一些注意事项：</p> <ol><li><p>首先只要是 docs 目录下的所有 md 文档都会被解析成 html ，这个可以在浏览器中直接输入地址查看效果</p></li> <li><p>侧边栏的显示是需要在 config.js 中配置的。</p></li> <li><p>侧边栏中配置的一个 title 相当于是一个根的侧边栏展示。</p> <p>如下面贴出的配置，写了两个 title ，访问 http://localhost:8080/vue-press/ 的时候
侧边栏展示的只是该 vue-press 配置中  children 的所有抓取到的标题。</p></li> <li><p>主页文件中怎么使用图片？</p> <p><code>docs/.vuepress/public</code> 把图片放在这个目录下，则可以直接使用 /xx.png 访问到</p></li> <li><p>md 文件中引用图片注意事项</p> <ol><li>可以把图片放在 public 全局目录下</li> <li>也可以把图片放在与 md 相同目录下，但是引用图片就的使用相对路径了，如 <code>./xxx,png</code></li></ol></li></ol> <p>比如下面的侧边栏配置，主要配置是 docs/.vuepress/config.js 文件</p> <div class="language- extra-class"><pre class="language-text"><code>module.exports = {
    title: 'Hello VuePress',
    description: 'Just playing around',
    sidebar: 'auto',
    themeConfig: {
        docsDir: 'docs',
        nav: [ // 配置顶部导航栏的条目
            {text: 'Home', link: '/'},
            {text: 'vue-press', link: '/vue-press/'},
            {text: 'demeter', link: '/03_design_principles/demeter.md'},
            {text: 'External', link: 'https://google.com'},
        ],
        sidebar: {
            // 配置侧边栏
            '/vue-press/': genSidebarVuePress(),
            '/03_design_principles/':
                genSidebarConfig(&quot;设计模式&quot;)
        }
    }
}

function genSidebarVuePress() {
    return [
        {
            title: 'vue-press',
            collapsable: false,
            children: [
                ''
            ]
        }
    ]
}

function genSidebarConfig(title) {
    return [
        {
            title,
            collapsable: true,
            children: [
                '',
                // 注意这里，可以写md后缀，也可以不写，也能获取到
                'composition_aggeregation',
                'demeter',
                'dependency_inversion.md',
                'interface_segregation.md',
                'liskov_substitution.md',
                'open_close.md',
                'single_responsibility.md',
                '本章导航.md'
            ]
        }
    ]
}

/*
这个语法就需要自己吧所有路径拼写完整；上面的语法则不需要相当于有一个基础的路径
[
    {
        title: '设计原则',
        collapsable: false,
        children: [
            '',
            // 这里的文档全路径其实就是 docs/03_design_principles
            '/03_design_principles/composition_aggeregation.md',
            '/03_design_principles/demeter',
            '/03_design_principles/dependency_inversion.md',
            '/03_design_principles/interface_segregation.md',
            '/03_design_principles/liskov_substitution.md',
            '/03_design_principles/open_close.md',
            '/03_design_principles/single_responsibility.md',
            '/03_design_principles/本章导航.md'
        ]
    }
]*/

</code></pre></div><h3 id="其他配置参考官网即可"><a href="#其他配置参考官网即可" class="header-anchor">#</a> 其他配置参考官网即可</h3> <p><a href="https://vuepress.vuejs.org/zh/guide/" target="_blank" rel="noopener noreferrer">vuepress<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> 的文档也是使用 vuepress 编写的，</p> <p>所以最好的学习方式就是查看他的源码，文档很少，但是配置中有使用 vue 组件的。已经很完善了</p> <blockquote><p>vuepress 项目地址： https://github.com/vuejs/vuepress/tree/master/docs</p></blockquote> <h2 id="在-md-中使用-vue"><a href="#在-md-中使用-vue" class="header-anchor">#</a> 在 md 中使用 vue</h2> <blockquote><p>https://vuepress.vuejs.org/zh/guide/using-vue.html</p></blockquote> <p>官网中有详细的介绍，这里简单说明下：</p> <p>添加依赖</p> <div class="language- extra-class"><pre class="language-text"><code> &quot;vuepress-theme-vue&quot;: &quot;~1.1.0&quot;
</code></pre></div><p>docs/.vuepress/components 目录下编写 vue 模板。</p> <div class="language- extra-class"><pre class="language-text"><code>如有一个 Demo-01.vue 的模板
那么 在 md 文件中可以直接写 &lt;Demo-01&gt;
</code></pre></div><p>注意：使用了 vue 的话，会在左上角生成一个广告位</p> <h2 id="部署到-gh-page"><a href="#部署到-gh-page" class="header-anchor">#</a> 部署到 gh-page</h2> <blockquote><p>官网文档： https://vuepress.vuejs.org/zh/guide/deploy.html#github-pages</p></blockquote> <p>这里粘贴下我这个项目的 deploy.sh 内容，比较简单，每一步都有中文说明，官网文档可以说是很良心了</p> <div class="language-bash extra-class"><pre class="language-bash"><code><span class="token shebang important">#!/usr/bin/env sh</span>

<span class="token comment"># 确保脚本抛出遇到的错误</span>
<span class="token builtin class-name">set</span> <span class="token parameter variable">-e</span>

<span class="token comment"># 生成静态文件</span>
<span class="token function">npm</span> run docs:build

<span class="token comment"># 进入生成的文件夹</span>
<span class="token builtin class-name">cd</span> docs/.vuepress/dist

<span class="token comment"># 如果是发布到自定义域名</span>
<span class="token comment"># echo 'www.example.com' &gt; CNAME</span>

<span class="token function">git</span> init
<span class="token function">git</span> <span class="token function">add</span> <span class="token parameter variable">-A</span>
<span class="token function">git</span> commit <span class="token parameter variable">-m</span> <span class="token string">'deploy'</span>

<span class="token comment"># 如果发布到 https://&lt;USERNAME&gt;.github.io</span>
<span class="token comment"># git push -f git@github.com:&lt;USERNAME&gt;/&lt;USERNAME&gt;.github.io.git master</span>

<span class="token comment"># 如果发布到 https://&lt;USERNAME&gt;.github.io/&lt;REPO&gt;</span>
<span class="token function">git</span> push <span class="token parameter variable">-f</span> git@github.com:zq99299/note-book.git master:gh-pages

<span class="token builtin class-name">cd</span> -
</code></pre></div><p>(windown 下)在 webstom 或则 gitBase 里面 可以直接运行 deploy.sh 文件。
最好在 gitBase 里面运行，能显示错误信息。</p> <p>还有一点需要注意的是：使用脚本必须在 gitHub 中添加你本机的 <code>id_rsa.pub</code>（里面的字符串） 公钥。</p> <p>如下图所示：添加之后执行脚本才能推送到分支上去
<img src="/assets/img/markdown-img-paste-20180904095711718.00110909.png" alt=""></p> <p>id_rsa.pub 的简易生成命令，更多的可以百度</p> <div class="language-bash extra-class"><pre class="language-bash"><code>// 一路回车即可，注意看控制台信息，有生成完成的文件路径
ssh-keygen <span class="token parameter variable">-t</span> rsa <span class="token parameter variable">-C</span> <span class="token string">&quot;邮箱地址&quot;</span>
</code></pre></div><h2 id="可以作为基础项目的分支"><a href="#可以作为基础项目的分支" class="header-anchor">#</a> 可以作为基础项目的分支</h2> <p>这个分支可以直接克隆下来 ，稍微修改，就能使用起来了。快速建立新的笔记项目</p> <p>建议认真看一遍官网文档，vuepress 不仅可以单独用来生成 markdown 的文档站点，还能在已有的 vue 项目中使用，</p> <p>换句话说，一个后端系统的使用手册文档就可以使用 vuepress 来构建，这个主意是很不错的。</p> <ul><li>构建站点好看</li> <li>默认主题配置方便</li> <li>使用 atom 来编写，图片插件来弥补 markdown 中插入图片不方便的缺陷</li> <li>脚本方便发布到 gh-page</li> <li>可以写 vue 组件来构建自己特殊的需求，生成站点部署在自己的云主机上</li></ul></div> <footer class="page-edit"><!----> <div class="last-updated"><span class="prefix">上次更新:</span> <span class="time">2023-01-04 11:37:26</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
      ←
      <a href="/introduce/" class="prev router-link-active">
        myblog 介绍与规约
      </a></span> <!----></p></div> </main></div><div class="global-ui"><!----><!----></div></div>
    <script src="/assets/js/app.6514719e.js" defer></script><script src="/assets/js/2.ea114ffb.js" defer></script><script src="/assets/js/8.1b9c5002.js" defer></script><script src="/assets/js/4.e093c564.js" defer></script>
  </body>
</html>
